
.datails{
    width: 98%;
    margin: 0 auto;
    height: auto;
    .title{
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 2px;
        background: #E5ECFD;
        padding-left: 17px;
        box-sizing: border-box;
        span{
            margin-right: 10px;
            font-size: 14px;
            color: #1891FF;
        }
        .bc{
            width: 5px;
            height: 15px;
            background: #1891FF;
            margin-right: 12px;
        }
    }
    .top{
       display: flex;
       width: 100%;
       height: 300px;
       justify-content: space-between;
       align-items: center;
       .left{
           width: 70%;
           height: 300px;
           margin-top:10px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           .list{
             width: 50%;
             height: 300px;
             background: #fff;
             padding: 10px;
             box-sizing: border-box;
             border-bottom: 1px solid #1891FF;
             border-right: 1px solid #1891FF;
             box-sizing: border-box;
             .sub{
                font-size: 14px;
                color: #1891FF; 
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .span{
                    width: 49.5%;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-left: 17px;
                    box-sizing: border-box;
                    margin-right: 1%;
                    .bc{
                        width: 5px;
                        height: 15px;
                        background: #1891FF;
                        margin-right: 12px;
                    }
                }
             }
             .tip{
                 width: 100%;
                 height: 200px;
                 margin: 0 auto;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 .item{
                     width: 50%;
                     height: 200px;
                     ul{
                         list-style: none;
                         height: 200px;
                         display: flex;
                         flex-direction: column;
                         justify-content: center;
                         li{
                             display: flex;
                             justify-content: flex-start;
                             align-items: center;
                             height: 30px;
                             span{
                                 color: #434242;
                                 font-size: 12px;
                             }
                             .radius{
                                 width: 15px;
                                 height: 15px;
                                 border-radius: 50%;
                                 background: #98D87D;
                                 margin-right: 10px;
                             }
                             .name{
                                 margin-right: 20px;
                                 width: 50px;
                                 white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                             }
                         }
                     }
                     .msg{
                         width: 90%;
                         margin:0 auto;
                         div{
                             width: 100%;
                             display: flex;
                             justify-content: space-between;
                             align-items: center;
                             height: 25px;
                             span{
                               color: #434242;
                               font-size: 12px;
                               text-align: left;
                               
                             }
                             span:nth-child(2){
                                width: 80px;
                             }
                             span:nth-child(3){
                                width: 40px;
                             }
                             span:nth-child(4){
                                width: 50px;
                             }
                             span:first-child{
                                 width: 15px;
                                 height: 15px;
                             }
                             
                         }
                     }
                 }

             }
           }
       }
       .right{
          width: 30%;
          height: 300px;
          margin-top:10px;
          .list{
            width: 100%;
            height: 300px;
            background: #fff;
            padding: 10px;
            border-bottom: 1px solid #1891FF;
            box-sizing: border-box;
            .sub{
                font-size: 14px;
                color: #1891FF; 
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .span{
                    width: 49.5%;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-left: 17px;
                    box-sizing: border-box;
                    margin-right: 1%;
                    .bc{
                        width: 5px;
                        height: 15px;
                        background: #1891FF;
                        margin-right: 12px;
                    }
                }
             }
             .tip{
                width: 100%;
                height: 250px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                 .item{
                    width: 50%;
                    height: 270px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    div{
                        width: 150px;
                        height: 150px;
                        background: url("../../assets/images/mach/reportAll/qiu1.png");
                        background-size: 150px 150px;
                        background-repeat: no-repeat;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #FEFDFF;
                        font-size: 30px;
                    }
                    .box2{
                        background: url("../../assets/images/mach/reportAll/qiu2.png"); 
                        background-size: 150px 150px;
                        background-repeat: no-repeat;
                    }
                 }
             }
          }
       }
    }
    .bottom{
        display: flex;
        width: 100%;
        height: 680px;
        justify-content: space-between;
        align-items: center;
        margin-top:10px;
        .left{
            width: 70%;
            height: 680px;
            margin-top:10px;
            .list{
                width: 100%;
                height: 680px;
                background: #fff;
                .sub{
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #1891FF; 
                    margin-bottom: 15px;
                    .span{
                        position: relative;
                        width: 49.5%;
                        height: 30px;
                        line-height: 30px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 17px;
                        box-sizing: border-box;
                        .bc{
                            width: 5px;
                            height: 15px;
                            background: #1891FF;
                            margin-right: 12px;
                        }
                        .exportBtn{
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            width: 57px;
                            height: 17px;
                            transform: translateY(-50%);
                            font-size: 30px;
                            cursor: pointer;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            img{
                                display: block;
                                width: 17px;
                                height: 17px;
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        } 
        .right{
            width: 29%;
            height: 680px;
            margin-top:10px;
            .list{
                width: 100%;
                height: 680px;
                background: #fff;
                .sub{
                    position: relative;
                    font-size: 14px;
                    color: #434242; 
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content:space-between;
                    align-items: center;
                    background: #E5ECFD;
                    color: #1891FF;
                    .span{
                        position: relative;
                        width: 49.5%;
                        height: 30px;
                        line-height: 30px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 17px;
                        box-sizing: border-box;
                        margin-right: 1%;
                        .bc{
                            width: 5px;
                            height: 15px;
                            background: #1891FF;
                            margin-right: 12px;
                        }
                        .exportBtn{
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            width: 57px;
                            height: 17px;
                            transform: translateY(-50%);
                            font-size: 30px;
                            cursor: pointer;
                            img{
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    
                }
                .tab{
                    position: relative;
                    display: flex;
                    width: 100%;
                    height: 32px;
                    justify-content: space-between;
                    align-items: center;
                    margin-top:20px;
                    .ivu-tabs{
                        width: 100%;
                    }
                    .sort{
                        position: absolute;
                        width: 17px;
                        height: 25px;
                        right: 0;
                        top: 20%;
                        transform: translate(-10%,-50%);
                        font-size: 24px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        z-index: 99;
                        cursor: pointer;
                    }
                }
                .rank{
                   width: 100%;
                   height: 600px;
                   div{
                       display: flex;
                       height: 50px;
                       justify-content: space-between;
                       align-items: center;
                       border-bottom:1px solid #eee;
                       span{
                           width: 33.3%;
                           text-align: center;
                           color: #434242;
                           font-size: 14px;
                       }
                       span:nth-child(2){
                        text-align: left;
                       } 
                       span:nth-child(3){
                           text-align: right;
                           margin-right: 20px;
                       }
                       
                   }
                   ul{
                       list-style: none;
                       width: 100%;
                       height: 550px;
                       li{
                           width: 100%;
                           height: 50px;
                           display: flex;
                           justify-content: space-between;
                           align-items: center;
                           background-color: #fff;                           
                           &:nth-of-type(2n){
                               background-color: #F3F6FD;
                           }
                           span{
                                width: 33.3%;
                                text-align: center;
                                color: #434242;
                                font-size: 14px; 
                           }
                           span:nth-child(1){
                               color: #1891FF;
                           }
                           span:nth-child(2){
                            text-align: left;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                           } 
                           span:nth-child(3){
                               text-align: right;
                               margin-right: 20px;
                           }
                       }

                   }

                }
            }  

        } 
    }
    .tabBox{
        .tableList{
            width: 100%;
            margin: auto;
            /deep/ .el-table{
                color: #5B5C5D;
                font-family: MicrosoftYaHei;
                font-size: pxToRem(14);
                td, 
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    background-color: #E5ECFD !important;
                    color: #1891FF;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
                
            }
        }
    }
    
    /deep/ .ivu-tabs-ink-bar{
        background-color: #1891FF !important;
    }
    /deep/ .ivu-tabs-nav .ivu-tabs-tab-active{
        color: #1891FF !important;
    }
    /deep/ .ivu-page-next:hover,
    /deep/ .ivu-page-prev:hover {
        border-color: #1891FF !important;
        color: #2005ff !important;
    }
    /deep/ .ivu-page-item:hover{
        border-color: #1891FF !important;
        color: #2005ff !important;
    }
    /deep/ .ivu-page-item-active{
        border-color: #1891FF !important;
    }
    /deep/ .ivu-page-options-elevator input:focus{
        border-color: #1891FF !important;
    }
    /deep/ .ivu-page-options-elevator:hover  input{
        border-color: #1891FF !important;
    }
}
